<template>
  <Page name="设置金额">
    <form @keypress.enter="submit">
      <div class="form-card">
        <div class="item fx fx-vc fx-between"  @click="showActionSheet=true">
          <div class="label">收款币种</div>
          <div class="right">
            <div class="fx-center">
              <span class="currency mr12" :class="{'currency-empty':!currency_code}">{{currency_code || '请选择'}}</span>
              <i class="css-arrow-right"></i>
            </div>
          </div>
        </div>

        <div class="item fxv momey-item">
          <div class="label">收款金额</div>
          <Input v-model="amount" type="text" filter="float" placeholder="请输入想要收款的金额" />
        </div>
        <div class="item">
          <Input v-model="remark" placeholder="添加备注(50字以内)" maxlength="50"/>
        </div>
      </div>
      <div class="form-btn">
        <button type="button" :disabled="!formValid || posting" class="btn btn-primary btn-block submit" @click="submit">确定</button>
      </div>
    </form>

    <ActionSheet
      v-if="showActionSheet"
      title="请选择收款方式"
      :list="currencys"
      :value="currency_code"
      @close="showActionSheet = false"
      @select="(item)=>{this.currency_code = item.value}"
      />
  </Page>
</template>

<script>
import { mapMutations } from 'vuex';
import Page from '~/components/page'
import Input from '~/components/Input'
import ActionSheet from '~/components/ActionSheet'

export default {
  // 验证页面来源是否正确
  components: {
    Page,
    Input,
    ActionSheet
  },
  async asyncData({store}){
    return {
      currencys: store.state.currencys.map(item=>{
        return {
          value:item.code,
          label:item.name
        }
      })
    }
  },
  data: function () {
    return {
      currency_code:'',
      amount: '',
      remark:'',
      posting:false,
      showActionSheet:false,
    }
  },
  computed: {
    formValid(){
      return String(this.currency_code).trim() && String(this.amount).trim();
    }
  },
  methods: {
    async submit(){
      if(!this.formValid || this.posting) return false;
      this.$router.replace({name:'recv',params:{currency_code:this.currency_code,amount:this.amount,remark:this.remark}});
    }
  }
}
</script>

<style lang="less" scoped>
  .form-card {
    .item {
      padding:30px;
      background-color:#fff;
      & + .item {
        border-top:1px solid #ededf0;
      }
      &.momey-item {
        .label {
          margin-bottom: 50px;
        }
      }
      .label {

        font-size:32px;
        color:#292929;
      }
      .currency {
        &.currency-empty {
          color:#c0c3cc;
        }
        font-size:30px;
        color:#292929;
      }
    }
  }
  .form-btn {
    padding:30px;
    margin-top:60px;
  }
</style>
